<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{ width:300px;height: 400px;border: solid 1px black;margin: 0 auto; }
    .box .cont{height: 300px;border-bottom: solid 1px black;overflow: auto;}
    .cont p{clear: both;border-radius: 6px;color:#fff;padding: 6px;max-width: 260px;}
    .cont p:nth-child(2n){background: #399;float: left;}
    .cont p:nth-child(2n-1){background: #993;float: right;}
  </style>
</head>
<body>
  <div class="box">
    <div class="cont">
    </div>
    <div class="form">
      <textarea class="txt"></textarea>
      <input type="button" value="发送" class="send">
    </div>
  </div>
</body>
<script>

  var txt = document.querySelector(".txt")
  var send = document.querySelector(".send")
  var cont = document.querySelector(".cont")

  send.onclick = function(){
    var str = txt.value.trim();
    if(str === "") return;

    var p = document.createElement("p");
    p.innerText = str;
    cont.appendChild(p);

    txt.value = "";
    cont.scrollTop = cont.scrollHeight;
  }
  
</script>
</html>